<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 400px;
            margin: auto;
            margin-top: 20px;
            background: #58a; background:
                radial-gradient(circle at top left,
                transparent 15px, #58a 0) top left,
                radial-gradient(circle at top right,
                transparent 15px, #58a 0) top right,
                radial-gradient(circle at bottom right,
                transparent 15px, #58a 0) bottom right,
                radial-gradient(circle at bottom left,
                transparent 15px, #58a 0) bottom left;
            background-size: 50% 50%; background-repeat: no-repeat;
            /*background-color: #ffbb33;*/
        }
        /*div.rect {*/
            /*transform: skewX(-45deg);*/
        /*}*/
        .button {
            position: relative;
            width: 100px;
            height: 32px;
            /* 其他的文字颜色、内边距等样式...... */
        }
        .button::before {
              content: ''; /* 用伪元素来生成一个矩形 */ position: absolute;
              top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
              background: #58a;
              transform: skew(45deg); }
        img {
            clip-path: polygon(50% 0, 100% 50%,
            50% 100%, 0 50%); transition: 1s clip-path;
        }
        img:hover {
            clip-path: polygon(0 0, 100% 0,100% 100%, 0 100%);
        }
    </style>
</head>
<body>
<!--<div class="rect"></div>-->
<!--<div class="button">dsdsdsd</div>-->
<!--<img src="./Desert.jpg" alt="">-->
<div></div>
</body>
</html>